<template>
    <div>

        <table border="1">
            <thead>
                <tr>
                    <th v-for="item in title" :key="item.name">{{ item.tname }}</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody>
                    <tr v-for="item in tItem" :key="item.id">
                        <td v-for="items in title" :key="items.name">{{ item[items.name] }}</td>
                        <td>
                            <button>修改</button>
                            <button v-on:click="onDel">删除</button>
                        </td>
                    </tr>
            </tbody>
        </table>
    </div>

</template>

<script setup>
const props = defineProps(['title', 'tItem'])

// console.log(props.tItem[0]);
// console.log(props.title[1].name);

function onDel(deleteId){
    props.tItem = props.tItem.filter(item=>{
        return item.id !=deleteId;
    })
}

</script>

<style lang="scss" scoped></style>